<script>
/**
 * @desc 年月选择栏
 */

export default {
  name: 'time-select-bar',

  props: {
    level: {
      type: Number,
      default: 0
    },
    year: Number,
    month: Number,
    handleSelect: {
      type: Function,
      default: () => {}
    },
    handleTimeLevel: {
      type: Function,
      default: () => {}
    }
  },

  computed: {
    btnText() {
      return this.level ? `${this.month + 1}月` : `${this.year}年`
    }
  }
}
</script>

<template>
  <div :class="$sty.bar">
    <div
      :class="$sty.selectBtn"
      @click="handleSelect(true)"
    >{{btnText}}</div>

    <view>
      <span
        :class="level===1 ? $sty.levelItemActive : $sty.levelItemNormal"
        @click="handleTimeLevel(1)"
      >月</span>
      <span
        :class="level===0 ? $sty.levelItemActive : $sty.levelItemNormal"
        @click="handleTimeLevel(0)"
      >年</span>
    </view>
  </div>
</template>

<style lang="scss" module>
.bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.selectBtn {
  position: relative;
  padding-right: 20px;
  font-weight: bold;
  color: $article-color;

  &::after {
    position: absolute;
    top: 50%;
    right: 0;
    display: block;
    content: '';
    border: 10px solid transparent;
    border-left-width: 6px;
    border-right-width: 6px;
    border-top-color: #000;
    transform: translateY(-25%);
  }
}

%levelItemBase {
  display: inline-block;
  width: 4em;
  margin-left: 10px;
  text-align: center;
  font-size: 16px;
  line-height: 2;
  border-radius: 16px;
  transition: all 0.25s;
}

.levelItemNormal {
  @extend %levelItemBase;
  color: $article-color;
  background-color: $main-gray;
}

.levelItemActive {
  @extend %levelItemBase;
  @extend %with-shadow;
  color: #fff;
  background: linear-gradient(90deg, $main-yellow, $main-red);
}
</style>
